<template>
    <div class="menu">
        <el-menu :collapse="isCollapse" class="el-menu-vertical-demo" :default-active="activeItem" unique-opened router
            @open="handleOpen" @close="handleClose" active-text-color="#ffd04b" background-color="#545c64"
            text-color="#fff">
            <template v-for="item in menuList" :key="item.path">
                <el-menu-item v-if="item.children && item.children.length === 1" :index="item.children[0].path"
                    @click="setActiveItem(item.children[0].path)">
                    <SvgIcon :name="item.meta.icon" :color="iconColor"></SvgIcon>
                    <span>{{ item.meta.title }}</span>
                </el-menu-item>
                <el-sub-menu v-else :index="item.path" :open="isMenuOpen(item.path)">
                    <template #title>
                        <SvgIcon :name="item.meta.icon" :color="iconColor" />
                        <span>{{ item.meta.title }}</span>
                    </template>
                    <template v-for="d in item.children" :key="d.path">
                        <el-menu-item-group>
                            <el-menu-item :index="d.path" @click="setActiveItem(d.path)">{{ d.meta.title
                                }}</el-menu-item>
                        </el-menu-item-group>
                    </template>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useMeanStore } from '@/store/menus';
import { storeToRefs } from "pinia";
import { useRoute } from 'vue-router';
import SvgIcon from './SvgIcon.vue';

const iconColor = ref('#fff')
const useMean = useMeanStore();
const { menuList } = storeToRefs(useMean);

const isCollapse = computed(() => useMean.isCollapse)

// 初始化当前活动项和打开的菜单项
const activeItem = ref('');
const openKeys = ref([]);

// 获取当前路由信息
const route = useRoute();

// 处理打开子菜单
const handleOpen = (key) => {
    if (!openKeys.value.includes(key)) {
        // 打开菜单
        openKeys.value.push(key);
        // 保存状态
        saveState();
    }
};

// 处理关闭子菜单
const handleClose = (key) => {
    const index = openKeys.value.indexOf(key);
    if (index !== -1) {
        // 关闭菜单
        openKeys.value.splice(index, 1);
        // 保存状态
        saveState();
    }
};

// 检查菜单是否打开
const isMenuOpen = (key) => {
    return openKeys.value.includes(key);
};

// 设置活动项  
const setActiveItem = (index) => {
    // 更新活动项
    activeItem.value = index;
    // 保存状态
    saveState();
};

// 保存状态函数  
const saveState = () => {
    sessionStorage.setItem('activeItem', activeItem.value);
    sessionStorage.setItem('openKeys', JSON.stringify(openKeys.value));
};

// 页面加载时从路由中获取状态  
onMounted(() => {
    // 设置当前活动项  
    activeItem.value = route.path;
    const currentItem = menuList.value.find(item => {
        if (item.children) {
            return item.children.some(child => child.path === route.path);
        }
        return item.path === route.path;
    });
    // 如果有父菜单且包含子菜单，则打开该菜单  否则打开当前项  
    if (currentItem && currentItem.children && currentItem.children.length > 1) {
        openKeys.value.push(currentItem.path);
    } else if (currentItem) {
        openKeys.value.push(currentItem.path);
    }
});

// 监听路由变化 
watch(route, (newRoute) => {
    activeItem.value = newRoute.path;
});

watch(isCollapse, (newVla) => {
    let container = document.querySelector('.container')
    if (!newVla) container.style.width = '0';
})
</script>

<style lang="scss" scoped>
.el-menu {
    border: none;
    height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
    overflow: auto;
}

/*隐藏垂直滚动条*/
::-webkit-scrollbar {
    display: none;
}

/*隐藏水平滚动条*/
::-webkit-scrollbar-horizontal {
    display: none;
}
</style>